<template>
  <div>
    <div
      class="echart-box"
      id="myChart2"
    ></div>

    <div
      class="echart-box"
      id="myChart1"
    ></div>


  </div>
</template>

<script>
import {wordCloudData} from "@/api/echarts/echart";

var that = this;
export default {
  name: "source",
  data() {
    return {
      // 定义图表，各种参数
      msg: "柱状图",
      ydata: [],
      xdata: [],
      datas:[
        { value: 64, name: "男" },
        { value: 32, name: "女" },
        { value: 12, name: "未知" },
      ],
      pie_data: [],
      pie_xdata: [],
    };
  },
  mounted: function () {
    this.drawLine(); //按照默认值绘制图表
  },
  created() {
    this.getSource();
  },
  watch: {
    ydata: {
      //对于深层对象的属性，watch不可达，因此对数组监控需要将数组先清空，再添加数据
      handler: function () {
        this.drawLine();
      },
      deep: true,
    },
  },
  methods: {
    getSource(){
      wordCloudData().then(res => {
        //console.log(",,,,,,,,,,,,,,,,")
        if (res.code === 200) {
          let pie=[];
          let count =[];
          let source =[];
          //var array = [];
          this.ydata.length = 0;

          for (let i = 0; i < res.data.length; i++) {
            this.ydata.push(res.data[i].count);
            this.xdata.push(res.data[i].paperSource);
            count[i] = res.data[i].count;
            source[i] = res.data[i].paperSource;
            //pie.push({value:res.data[i].count,name:res.data[i].paperSource});
          }
          for (let i = 0; i < source.length; i++) {
            var map = {};
            map.name = source[i];
            map.value = count[i];
            this.pie_data[i] = map;
          }
          //console.log(this.pie_data);
        }
        //console.log(this.pie_xdata);

      })
    },

    drawLine() {
      // 1、基于准备好的dom，初始化echarts实例
      let myChart_1 = this.$echarts.init(document.getElementById("myChart1"));
      let myChart_2 = this.$echarts.init(document.getElementById("myChart2"));
      //构造柱状图图表的数据
      let options_1 = {
        title: {
          text: "期刊可视化展示",
          left: "center",
          tooltip: {},
        },
        xAxis: {
          type: 'category',
          axisLabel: {
            interval:0,//代表显示所有x轴标签显示
            rotate:45, //代表逆时针旋转45度
          },
          data: this.xdata,
        },
        yAxis: {},
        series: [
          {
            name: "期刊名称",
            data: this.ydata,
            type: "bar",
            //设置柱子的宽度
            barWidth: 30,
            //配置样式
            itemStyle: {
              //通常情况下：
              normal: {
                //每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
                color: function (params) {
                  var colorList = [
                    'rgb(164,205,238)',
                    'rgb(42,170,227)',
                    'rgb(25,46,94)',
                    'rgb(195,229,235)',
                    'rgb(195,214,235)',
                    'rgb(195,206,235)',
                    'rgb(200,195,235)',
                    'rgb(211,195,235)',
                    'rgb(235,195,234)',
                    'rgb(235,195,216)',
                  ];
                  return colorList[params.dataIndex];
                },
                label: {
                  show: true,     //开启显示
                  position: 'top',    //在上方显示
                  textStyle: {        //数值样式
                    color: 'rgb(42,170,227)',
                    fontSize: 16
                  }
                },
              },
              //鼠标悬停时：
              tooltip: { // 鼠标悬浮提示框显示 X和Y 轴数据
                trigger: 'axis',
                backgroundColor: 'rgba(32, 33, 36,.7)',
                borderColor: 'rgba(32, 33, 36,0.20)',
                borderWidth: 1,
                textStyle: { // 文字提示样式
                  color: '#fff',
                  fontSize: '12'
                },
              },
            }
          }
        ],
      };
      //饼图图表的数据
      let options_2 = {
        title: {
          //text: "期刊情况饼图分析",
          left: "center",
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)",
        },
        legend: {
          // orient 设置布局方式，默认水平布局，可选值：'horizontal'（水平） ¦ 'vertical'（垂直）
          orient: 'vertical',
          // x 设置水平安放位置，默认全图居中，可选值：'center' ¦ 'left' ¦ 'right' ¦ {number}（x坐标，单位px）
          x: 'left',
          // y 设置垂直安放位置，默认全图顶端，可选值：'top' ¦ 'bottom' ¦ 'center' ¦ {number}（y坐标，单位px）
          y: 'center',
          itemWidth: 24,   // 设置图例图形的宽
          itemHeight: 18,  // 设置图例图形的高
          textStyle: {
            color: '#666'  // 图例文字颜色
          },
          // itemGap设置各个item之间的间隔，单位px，默认为10，横向布局时为水平间隔，纵向布局时为纵向间隔
          itemGap: 15,
          data: this.xdata,
        },
        series: [
          {
            name: "访问来源",
            type: "pie",
            radius: "55%",
            center: ["50%", "60%"],
            data: this.pie_data,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
              labelLine: {
                normal: {
                  show: false   // show设置线是否显示，默认为true，可选值：true ¦ false
                }
              },
            },
          },
        ],
      };
      // 3、绘制图表
      myChart_1.setOption(options_1);
      myChart_2.setOption(options_2);
    },
  },
}
</script>

<style scoped>
#myChart2 {
  background:white;
  min-height: 400px;
  min-width: 600px;
  float: right;
  position:fixed;
  top:0;
}
#myChart1{
  width: 700px;
  height: 500px;
  background: #ffffff;
  position:fixed;
  bottom:0;
}
</style>
